.panel.panel-default
  .panel-heading
    .panel-title
      .html_title= @html_title||'userlist'
      .pull-right
        = link_to '保存', 'javascript:void(0)', class: 'btn btn-primary submit-firm-form'
  .panel-body
    #firm_with_contacts
      = simple_form_for(@sales_firm, remote: true) do |f|
        table.table.table-bordered
          tr
            th style='width:120px' 公司名
            td colspan=3
              = f.input_field :name, class: 'form-control normal-input', style: 'min-width: 400px', 'v-model': 'firm.name'
              = link_to '查重', 'javascript: void(0);', class: 'btn btn-warning push-10-l'
          tr
            th 字号
            td = f.input_field :short_name, class: 'form-control', style: 'display: inline-block; width: 160px', 'v-model': 'firm.short_name'
            th style='width:120px' 网址
            td = f.input_field :website, class: 'form-control', 'v-model': 'firm.website'
          tr
            th 省份城市
            td
              = f.input_field :province_id, as: :select,
                      style: 'width: 150px; display: inline-block',
                      prompt: '请选择省份', class: 'form-control relation_province_selector',
                      collection: ::Base::Province.options,
                      'v-model': 'firm.province_id',
                      'v-on:change': ''
              = f.input_field :city_id, as: :select, collection: ::Base::City.options(@sales_firm.province_id),
                      style: 'width: 150px; display: inline-block',
                      'v-model': 'firm.city_id', class: 'form-control relation_city_selector'
            th 公司地址
            td = f.input_field :address, class: 'form-control', 'v-model': 'firm.address'
          tr
            th 公司电话
            td = f.input_field :phone, class: 'form-control', 'v-model': 'firm.phone'
            th 公司传真
            td = f.input_field :fax, class: 'form-control', 'v-model': 'firm.fax'
          tr
            th 公司邮箱
            td = f.input_field :email, class: 'form-control', 'v-model': 'firm.email'
          tr
            th 备注
            td colspan=3
              = f.input_field :notes, as: :text, class: 'form-control', 'v-model': 'firm.notes'
      button.btn.btn-default (v-on:click=' addContact ') 添加联系人
      table.table.table-responsive
        tr
          th 姓名
          th 称谓
          th 职位
          th 手机
          th 电话/分机
          th 邮箱
          th 关键联系人
          th 操作
        tr (v-for="(contact, index) in firm.contacts_attributes")
          td
            input.form-control.normal-input (style='width:80px' v-model='contact.name')
          td
            input.form-control.normal-input (style='width:100px' placeholder="先生/女士" v-model='contact.salutation')
          td
            input.form-control.normal-input (style='width:60px' v-model='contact.position')
          td
            input.form-control.normal-input (style='width:140px' v-model='contact.mobile')
          td
            input.form-control.normal-input (style='width:160px' v-model='contact.phone')
            |-
            input.form-control.normal-input (style='width:60px' v-model='contact.phone_ext')
          td
            input.form-control.normal-input (style='width:180px' v-model='contact.email')
          td
            label.css-input.css-checkbox.css-checkbox-primary
              input type='checkbox'
              span
          td
            button.btn.btn-default (v-on:click=' removeContact(index)') 删除

javascript:
  $('.submit-firm-form').click(function () {
    vue_firm_form.save()
  })


  var firm = #{@sales_firm.editable_attributes_json.html_safe}
      firm.contacts_attributes = [{}]
  var vue_firm_form = new Vue({
    el: '#firm_with_contacts',
    mixins: [TurbolinksAdapter],
    data: function () {
      return {firm: firm}
    },
    methods: {
      revertContact: function (index) {
        this.firm.contacts_attributes[index]._destroy = null
        Vue.set(this.firm.contacts_attributes, index, this.firm.contacts_attributes[index])
      },
      addContact: function () {
        this.firm.contacts_attributes.push({name: '', _destroy: null})
      },
      removeContact: function (index) {
        this.firm.contacts_attributes.splice(index, 1)

      },
      save: function () {
        this.$http.post('/sales/firms', {sales_firm: this.firm}).then(function (res) {
          Turbolinks.visit('/sales/firms/'+res.body.id)
        },function (res) {
          error_notice('提交失败！'+res.bodyText)
        })

      }
    }
  })
